<template>
  <div class="props-container">
    <el-tabs v-model="activeTab" @tab-click="handelChange">
      <el-tab-pane label="字段配置" name="0"><WidgetProps :widget-data="widgetData" @statusCheck="statusCheck" /></el-tab-pane>
      <el-tab-pane label="表单属性" name="1"><CommonProp ref="commonPropRef" :fixed-id="fixedId" :widget-data="widgetData" @changeData="changeData" /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import CommonProp from './prop/common/commonProp';
import WidgetProps from './prop/widgetProps';

export default {
  name: 'FormMakeRight',
  components: { CommonProp, WidgetProps },
  model: {
    prop: 'widgetData',
    event: 'changeData'
  },
  props: {
    widgetData: {
      type: Object,
      default: () => {
        return {
          list: [],
          config: {
            labelWidth: 100, labelPosition: 'right',
            keyToFormula: {}, // 公式字段的映射表（被引用的字段: 引用它的公式字段）
            formValidate: [], // 发起审批验证
            fieldCondition: [] // 字段显示条件
          }
        };
      }
    },
    fixedId: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      activeTab: '0'
    };
  },
  methods: {
    changeData() {
      this.$emit('changeData', this.widgetData);
    },
    statusCheck() {
      this.$emit('statusCheck');
    },
    handelChange() {
      if (this.activeTab === '1') {
        this.$refs.commonPropRef.initFieldList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.props-container {
  width: 320px;
  padding: 0 24px;
  padding-top: 20px;
  flex-shrink: 0;
  box-shadow: -5px 0px 6px 0px rgba(240,242,245,0.81);
  z-index: 1;
  &::v-deep {
    .el-tabs {
      height: 100%;
      .el-tabs__nav-wrap::after {
        background-color: #ebeefd;
      }
      .el-tabs__content {
        height: calc(100% - 60px);
      }
      .el-tab-pane {
        height: 100%;
      }
      .is-active {
        font-weight: bold;
      }
    }
  }
}
</style>
